<template>
  <section class="main">
    <!-- v-model记得会违反单向数据流？但这里会吗？处理好set逻辑就可以了
      checkAll 计算属性 
        get 有没有改list数据 - 没有改 - 没有违反
        set 需要修改list数据但list数据不能再子组件直接修改 怎么办？
            通过子传父 通知父亲让父亲进行修改 - 没有违反单向数据流
     -->
    <input
      v-model="checkAll"
      id="toggle-all"
      class="toggle-all"
      type="checkbox"
    />
    <label for="toggle-all">Mark all as complete</label>
    <ul class="todo-list">
      <!-- 当任务已完成，可以给 li 加上 completed 类，会让元素加上删除线 -->
      <li :class="{ completed: item.done }" v-for="item in list" :key="item.id">
        <div class="view">
          <!-- v-model不能用，因为违反了单向数据流直接改了父组件数据list -->
          <input
            class="toggle"
            type="checkbox"
            :checked="item.done"
            @change="handleChange(item.id)"
          />
          <label>{{ item.name }}</label>
          <button class="destroy" @click="handleDel(item.id)"></button>
        </div>
      </li>
    </ul>
  </section>
</template>

<script>
export default {
  props: {
    // 必填 type是数组
    list: {
      required: true,
      type: Array,
    },
  },
  methods: {
    handleChange(id) {
      //   console.log(id);
      // 直接改父组件数据list 违反了单向数据流 并且有了报错 有报错信息
      // this.list = [];
      // this.list.push({});
      // this.list[0].done = true;
      this.$emit("changeFn", id);
    },
    handleDel(id) {
      //   console.log(id);
      this.$emit("del", id);
    },
  },
  computed: {
    checkAll: {
      // 是否全部选中
      get() {
        // 数组方法 - every - 所有条件都满足符合条件返回true - 所有的如果都勾选了 才勾选上全选
        return (
          // xx || [] 逻辑或 遇真则真
          // xx && yy 逻辑与 遇到真往后执行
          this.list.length && this.list.every((item) => item.done === true)
        );
      },
      set(val) {
        // console.log(val);
        // 要子传父 通过父组件去修改list数据每一项的值 这个值改成val即可
        this.$emit("checkAll", val);
      },
    },
  },
};
</script>

<style>
</style>